<template>
	<div class="front_types_section">
		<div class="box">
			<dl v-for="(item, index) in resourceTypes" :key="index" :class="item.typeIcon">
				<dt>{{ item.showTypeName }}</dt>
				<dd>{{ item.count }}</dd>
			</dl>
		</div>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
import { getResourceStat } from '@/api/openApi';
export default {
	data() {
		return {
			resourceTypes: []
		};
	},
	mounted() {
		//this.getResTypeStat();
	},
	methods: {
		...mapActions(['getEnumDataByCode']),
		
		//获取资源类型数据
		async getResTypeData() {
			let result = this.getEnumDataByCode({ code: '' });
			console.log(result);
		},

		//获取资源类型统计
		async getResTypeStat() {
			let result = await getResourceStat().then((res) => res.data);
			if (result.code === '0') {
				let datas = !result.data
					? []
					: [
							...result.data,
							{
								showType: '5',
								count: '0',
								showTypeName: '其他'
							}
					  ];
				this.resourceTypes = datas.map((item) => {
					let obj = { ...item };
					switch (item.showType) {
						case '1':
							obj['typeIcon'] = 'el-icon-sw-image';
							break;
						case '2':
							obj['typeIcon'] = 'el-icon-sw-audio';
							break;
						case '3':
							obj['typeIcon'] = 'el-icon-sw-video';
							break;
						case '4':
							obj['typeIcon'] = 'el-icon-sw-document';
							break;
						default:
							obj['typeIcon'] = 'el-icon-sw-other';
							break;
					}
					return obj;
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.front_types_section {
	margin-top: 40px;
	overflow: hidden;
	.box {
		display: flex;
		height: 120px;
		margin: 0 -12px;
	}
	dl {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		width: 20%;
		margin: 0 12px;
		border-radius: 8px;
		background: url('../../../assets/img/resTypeBg.png') no-repeat center;
		background-size: cover;
		position: relative;
		padding-left: 100px;
		color: #fff;
		&::before {
			position: absolute;
			top: 50%;
			left: 30px;
			font-size: 48px;
			transform: translateY(-50%);
			background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		&.el-icon-sw-image {
			background-color: #6ccec7;
		}
		&.el-icon-sw-audio {
			background-color: #60c1e9;
		}
		&.el-icon-sw-video {
			background-color: #ee518c;
		}
		&.el-icon-sw-document {
			background-color: #ec7b7b;
		}
		&.el-icon-sw-other {
			background-color: #f1b656;
		}
	}
	dt {
		font-size: 20px;
		margin-bottom: 10px;
	}
	dd {
		font-size: 32px;
		font-weight: bold;
	}
}
</style>
